<template>
  <Suspense>
    <template #default>
      <show-pic />
    </template>
    <template #fallback>
      <div class="loading">Loading...</div>
    </template>
  </Suspense>
  <h1>{{ x }}</h1>
  <h1>{{ y }}</h1>
  <column-list :list="list" />
</template>

<script lang="ts">
import ShowPic from './components/ShowPic.vue'
import ColumnList, { ColumnProps } from './components/ColumnList.vue'
import userMousePosition from './hooks/userMousePosition'

export default {
  name: 'App',
  components: {
    ShowPic,
    ColumnList,
  },
  setup() {
    const { x, y } = userMousePosition()
    const testData: ColumnProps[] = [
      {
        id: 1,
        title: 'test1',
        des: 'test1',
        avatar: 'https://picsum.photos/id/239/200/200',
      },
      {
        id: 2,
        title: 'test2',
        des: 'test2',
        avatar: '',
      },
      {
        id: 3,
        title: 'test3',
        des: 'test3',
        avatar: 'https://picsum.photos/id/239/200/200',
      },
      {
        id: 4,
        title: 'test4',
        des: 'test4',
        avatar: 'https://picsum.photos/id/239/200/200',
      },
    ]
    return { x, y, list: testData }
  },
}
</script>

<style lang="scss" scoped>
  *{
    margin:0;
    padding:0;
  }

  .loading{
    width:200px;
    height:200px;
    background-color: #eee;
    font-size: 24px;
    color:#333;
    text-align: center;
    line-height: 200px;
    margin:0 auto;
  }
</style>